<template>
  <div class="job-intention">
    <div class="job-header">
      <el-button type="primary" @click="insertJob">增加个人信息</el-button>
    </div>
    <div class="job-body" v-if="userList.length">
      <el-table :data="userList" style="width: 100%">
        <el-table-column label="期望行业" width="200">
          <template slot-scope="scope" v-if="scope.row.industry.length">
            <span v-for="item in scope.row.industry" :key="item.value">{{item.label}},</span>
          </template>
        </el-table-column>
        <el-table-column label="期望职位" width="200">
          <template slot-scope="scope" v-if="scope.row.position.length">
            <span v-for="item in scope.row.position" :key="item.value">{{item.label}},</span>
          </template>
        </el-table-column>
        <el-table-column label="工作城市" width="200">
          <template slot-scope="scope" v-if="scope.row.citys.length">
            <span v-for="item in scope.row.citys" :key="item.value">{{item.label}},</span>
          </template>
        </el-table-column>
        <el-table-column label="公司规模" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.scale?scope.row.scale.label:''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="期望薪资" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.salary?scope.row.salary.label:''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="社保" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.ensure?scope.row.ensure.label:''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="200" prop="user_name">
          <template slot-scope="scope">
            <span>{{scope.row.time}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button size="mini"
            :disabled="token !== scope.row.userId" type="info" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button size="mini"
            :disabled="token !== scope.row.userId" type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog class="form-el-dialog" title="个人基础信息" :visible.sync="dialogVisible" width="60%">
      <job-form :dialog-visible.sync="dialogVisible"
      v-if="industryList.length" :industry-list="industryList"
      :position-list="positionList"
      :city-list="cityList" :scale-list="scaleList"
      :salary-list="salaryList" :ensure-list="ensureList" :user-item="userItem"></job-form>
    </el-dialog>

    <div>jobIntention -> 求职意向</div>
  </div>
</template>

<script>
import moment from 'moment';
import OptionsData from '@/utils/optionsData';
import OptionsApi from '@/api/options';

import { getToken } from '@/utils/auth'; // get token from cookie
import jobIntentionApi from '@/api/jobIntention';
import JobForm from './components/JobForm.vue';

export default {
  name: 'jobIntention',
  components: {
    JobForm,
  },
  data() {
    return {
      token: null,
      userList: [],
      dialogVisible: false,
      userItem: null,
      industryList: [],
      positionList: [],
      cityList: [],
      scaleList: [],
      salaryList: [],
      ensureList: [],
    };
  },
  mounted() {
    this.token = parseInt(getToken(), 10);
    // 期望行业 期望职位 期望城市 公司规模 社保
    const arr = ['industry', 'job', 'citys', 'scale', 'ensure', 'salary'];
    const getarr = [];
    arr.forEach((item) => {
      const obj = OptionsData.find(a => a.label === item) || null;
      if (obj) {
        getarr.push(obj.type);
      }
    });
    OptionsApi.getList(getarr)
      .then((rec) => {
        const recData = rec.data;
        if (recData.length > 0) {
          recData.forEach((item) => {
            const c = {
              value: item.id,
              label: item.value,
            };
            if (item.label === 'industry') {
              this.industryList.push(c);
            }
            if (item.label === 'job') {
              this.positionList.push(c);
            }
            if (item.label === 'citys') {
              this.cityList.push(c);
            }
            if (item.label === 'scale') {
              this.scaleList.push(c);
            }
            if (item.label === 'ensure') {
              this.ensureList.push(c);
            }
            if (item.label === 'salary') {
              this.salaryList.push(c);
            }
          });
        }
      })
      .catch(() => {
      });
    // 求职意向列表
    this.getList();
  },
  methods: {
    insertJob() {
      this.dialogVisible = true;
    },

    // 求职意向列表
    getList() {
      jobIntentionApi
        .getJobList()
        .then((rec) => {
          if (rec.data) {
            this.userList = rec.data.map((i) => {
              const obj = {
                id: i.id,
                citys: i.citys
                  .split(',')
                  .map(item => this.cityList.find(c => c.value === parseInt(item, 10))),
                ensure: this.ensureList.find(
                  item => item.value === parseInt(i.ensure, 10),
                ),
                industry: i.industry
                  .split(',')
                  .map(item => this.industryList.find(c => c.value === parseInt(item, 10))),
                position: i.position
                  .split(',')
                  .map(item => this.positionList.find(c => c.value === parseInt(item, 10))),
                salary: this.salaryList.find(
                  item => item.value === parseInt(i.salary, 10),
                ),
                scale: this.scaleList.find(
                  item => item.value === parseInt(i.scale, 10),
                ),
                time: moment(i.time * 1000).format('YYYY-MM-DD'),
                userId: i.u_id,
              };
              return obj;
            });
          } else {
            this.userList = [];
          }
        })
        .catch(() => {
          this.userList = [];
        });
    },
    // 编辑
    handleEdit(data) {
      this.userItem = data;
      this.dialogVisible = true;
    },
    // 删除
    handleDelete(i) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          jobIntentionApi
            .delJob(i.id)
            .then((res) => {
              if (res.data) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                });
                this.getList();
              } else {
                this.$message({
                  type: 'info',
                  message: '删除失败!',
                });
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '删除失败!',
              });
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
  },
  watch: {
    dialogVisible() {
      if (!this.dialogVisible) {
        this.userItem = null;
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.job-intention {
  width: 100%;
  padding: 15px;
  position: relative;
  .job-header {
     padding:10px 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
  }
  .job-body {
     padding:10px 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
  }
}
</style>
